<template>
  <div class="type1">
    <div class="finger" ref="finger" v-show="end1">
      点击这里
      <img src="@/static/finger.svg" alt="">
    </div>
    <div class="fingerbtn" v-show="fingerbtn">
      点击这里录音和结束录音
      <img src="@/static/finger.svg" alt="">
    </div>
    <img src="@/static/voice.png" alt="" v-show="end1" class="voice" @click="playaudio">
    <audio ref="audioRef" :src="mymp3" @ended="enddd"></audio>

    <img :src="mypic" alt="" class="topic" v-if="endsWithAny(mypic.toLowerCase(), ['.png', '.jpg'])">
    <div class="processdetail1" v-else> <video ref="videoPath" controls class="videoPath" :src="mypic"
        @ended="videoPath.controls = false; end1 = true"></video>
    </div>
    <img v-show="end2" src="@/static/record.png" alt="" :class="voice" @click="toggleRecording" :disabled="isRecording">
  </div>
</template>
<script setup>
const audioRef = ref();
const videoPath = ref();
const playaudio = () => {
  console.log(audioRef.value.src);
  if (audioRef.value) {
    audioRef.value.play().catch(error => {
      console.error('Error playing audio:', error);
    });
  }
};
const finger = ref(null);
import axios from 'axios';
import api from '@/api/user';
import { message } from 'ant-design-vue';
import { ref, defineProps, onMounted, defineEmits } from 'vue';
import { useAuthStore } from '../store/index';
import { useRouter, useRoute } from 'vue-router';
import Recorder from 'recorder-core';
//引入mp3格式支持文件；如果需要多个格式支持，把这些格式的编码引擎js文件放到后面统统引入进来即可
import 'recorder-core/src/engine/mp3';
import 'recorder-core/src/engine/mp3-engine';
//录制wav格式的用这一句就行
import 'recorder-core/src/engine/wav';
//可选的插件支持项，这个是波形可视化插件
import 'recorder-core/src/extensions/waveview';
//ts import 提示：npm包内已自带了.d.ts声明文件（不过是any类型）
const end1 = ref(false);
const end2 = ref(false);
const time = ref(0);
const timer = ref(null);
const enddd = () => {
  finger.value.style.top = '40%';
  end2.value = true;
  fingerbtn.value = true;
  timer.value = setInterval(() => {
    time.value += 100;
  }, 100);
}
const fingerbtn = ref(false);
const mediaRecorder = ref(null);
const audioChunks = ref([]);
const audioURL = ref(null);
const nowaudio = ref(null);
const isRecording = ref(false);
const router = useRouter();
const route = useRoute();
const Store = useAuthStore();
const correct = ref();
const voice = ref('voice')
onMounted(() => {
  if (endsWithAny(props.mypic.toLowerCase(), ['.png', '.jpg'])) {
    end1.value = true
  }
  recOpen();
})
function endsWithAny(str, suffixes) {
  return suffixes.some(suffix => str.endsWith(suffix));
}
let rec;
let recBlob;
let wave;
const recwave = ref(null);
function recOpen() {
  //创建录音对象
  rec = Recorder({
    type: 'mp3', //录音格式，可以换成wav等其他格式
    sampleRate: 16000, //录音的采样率，越大细节越丰富越细腻
    bitRate: 16, //录音的比特率，越大音质越好
    onProcess: (
      buffers,
      powerLevel,
      bufferDuration,
      bufferSampleRate,
      newBufferIdx,
      asyncEnd,
    ) => {
      //录音实时回调，大约1秒调用12次本回调
      //可实时绘制波形，实时上传（发送）数据
      if (wave) {
        wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate);
      }
    },
  });
  if (!rec) {
    alert('当前浏览器不支持录音功能！');
    return;
  }
  rec.open(
    () => {
      console.log('录音已打开');
      if (recwave.value) {
        //创建音频可视化图形绘制对象
        wave = Recorder.WaveView({ elem: recwave.value });
      }
    },
    (msg, isUserNotAllow) => {
      //用户拒绝了录音权限，或者浏览器不支持录音
      console.log((isUserNotAllow ? 'UserNotAllow，' : '') + '无法录音:' + msg);
    },
  );

}
function recStart() {
  if (!rec) {
    console.error('未打开录音');
    return;
  }
  rec.start();
  console.log('已开始录音');
  voice.value = "voice change"
}
function recStop() {
  if (!rec) {
    console.error('未打开录音');
    return;
  }
  rec.stop(
    (blob, duration) => {
      //blob就是我们要的录音文件对象，可以上传，或者本地播放
      recBlob = blob;
      //简单利用URL生成本地文件地址，此地址只能本地使用，比如赋值给audio.src进行播放，赋值给a.href然后a.click()进行下载（a需提供download="xxx.mp3"属性）
      const localUrl = (window.URL || window.webkitURL).createObjectURL(blob);
      console.log('录音成功', blob, localUrl, '时长:' + duration + 'ms');
      upload(blob); //把blob文件上传到服务器
      rec.close(); //关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
      rec = null;
      // recPlay();
    },
    (err) => {
      console.error('结束录音出错：' + err);
      rec.close(); //关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
      rec = null;
    },
  );
}
const toggleRecording = () => {
  if (!isRecording.value) {
    // startRecording();
    isRecording.value = 1;
    message.success('开始录音');
    recStart()
  } else {
    recStop();
    message.success('结束录音');
    // stopRecording();
  }
};
const choose = async (x) => {
  Store.addnowtopic();
  console.log(Store.nowtopic);
  console.log(Store.topics.length);
  if (Store.nowtopic >= Store.topics.length) {
    if (x == props.anawer) {
      Store.setcorrectnum(++Store.correctnum);
    }
    await addaccuracy();
    console.log("correct" + Store.correctnum);
    Store.settopics([]);
    Store.resetnowtopic();
    Store.setcorrectnum(0);

    // router.push({
    //   path: "/big"
    // })
  }
  else {

    if (x) {
      console.log("nowtopic" + Store.nowtopic);
      Store.setcorrectnum(++Store.correctnum);
      router.push({
        path: "/smallreward",
        query: {
          processnum: Store.topics[0].levelId
        }
      })
    } else {
      router.push({
        path: "/smallerror",
        query: {
          processnum: Store.topics[0].levelId
        }
      })
      // router.push({
      //   path: "/game",
      //   query: {
      //     processnum: Store.topics[0].levelId
      //   }
      // })
    }

  }
  if (Store.nowtopic >= Store.topics.length) {


    // router.push({
    //   path: "/big"
    // })
  }

}
const addaccuracy = () => {
  try {
    return new Promise((resolve) => {
      let number = 10;
      if (route.query.processnum / 8 > 3) {
        number = 6;
      }
      api.accuracy({
        "accuracy": Store.correctnum / number,
        "type": "test",
        "level": route.query.processnum
      })
        .then((res) => {
          console.log(Store.correctnum);
          if (Store.correctnum / number >= 0.7) {
            addachieve();
          } else {
            router.push({
              path: "/unreward", query: {

                proccess: route.query.processnum
              }
            })
          }

          resolve(1);
        })
    })
  } catch (error) {

  }

}
const addachieve = () => {
  const reward = Math.floor(Math.random() * 4) + 1
  router.push({
    path: "/preward", query: {
      reward: reward,
      proccess: route.query.processnum
    }
  })
  api.addachieve({
    rewardId: reward
  })
}
const upload = (blob) => {
  const formData = new FormData();
  formData.append('file', blob, "recording.mp3"); // 'recording.wav' 是文件名，可以根据实际情况修改
  formData.append('level', route.query.processnum);
  axios({
    url: "/interface/shasha/upload",
    method: "post",
    headers: {
      Authorization: localStorage.getItem('token'),
      'Content-Type': 'multipart/form-data'
    },
    data: formData
  })
    .then(async (res) => {
      console.log(res);
      correct.value = res.data.correct;

      await accuracys(res.data)


    })
}
const accuracys = async (x) => {
  clearInterval(timer.value);
  await api.addrecord({
    "correct": x.correct,
    "levels": route.query.processnum,
    "questionId": props.id,
    "answerPath": x.fileName,
    "testType": "test",
    "selectAnswerDuration": String(time.value)
  })
    .then(async (res) => {
      console.log(res);
      choose(x.correct)

    })

}
const props = defineProps({
  mymp3: {
    type: String,
    required: true
  },
  mypic: {
    type: String,
    required: true
  },
  anawer: {
    type: String,
    required: true
  }, id: {
    type: String,
    required: true
  }
});

</script>
<style lang="scss" scoped>
.finger {
  position: absolute;
  display: flex;
  left: 50%;
  top: 50%;
  transform: translate(-20rem, -18rem);
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: red;
  font-weight: 900;

  img {
    transform: rotate(90deg);
  }
}

.fingerbtn {
  position: absolute;
  display: flex;
  left: 50%;
  top: 50%;
  transform: translate(-30rem, 20rem);
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: red;
  font-weight: 900;
  width: 18rem;

  img {
    transform: rotate(90deg);
  }
}

.change {
  filter: invert(1) sepia(1) saturate(10) hue-rotate(40deg);
  /* Adjust the values to get the desired color */

}

.type1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;

  .processdetail1 {
    background-image: url("@/static/processdetail2.jpg");
    background-size: cover;
    height: 30.5rem;
    width: 40rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3rem;

    img {
      height: 90%;
      width: 90%;
    }
  }

  .videoPath {
    z-index: 3;
    height: 100%;
    width: 100%;
  }

  .voice {

    height: 8rem;
    width: 8rem;
  }

  .topic {
    height: 30rem;
    width: 30rem;
  }

  .chooses {
    background-color: #fbe5d6;
    width: 60rem;
    height: 15rem;
    border-radius: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;

    .item {
      display: flex;
      flex-direction: column;
      font-size: 3rem;
    }
  }
}
</style>